<template>
  <div :style="{ padding: '5px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :forceFit="true" :height="height" :data="data">
      <v-tooltip />
      <v-axis />
      <v-legend />
      <v-stack-bar position="月份*月均降雨量" color="name" />
    </v-chart>
  </div>
</template>

<script>
  import {triggerWindowResizeEvent} from '@/utils/util'

  export default {
    name: 'Bars',
    props: {
      sourceData: {
        type: Array,
        required: true
      },
      fields: {
        type: Array,
        required: true
      },
      title: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 254
      }
    },
    data() {
      return {
        data:{},
        padding: ['auto', 'auto', '40', '50'] }
    },
    created() {
      this.load();
    },
    methods:{
      load(fields,data){
        console.log(fields,data);
        if(fields!=undefined){
          this.fields = fields;
        }
        if(data!=undefined){
          this.sourceData = data;
        }
        const DataSet = require('@antv/data-set');
        const sourceData = this.sourceData;
        const dv = new DataSet.View().source(sourceData);
        console.log(dv)
        dv.transform({
          type: 'fold',
          fields: this.fields,
          key: '月份',
          value: '月均降雨量',
        });
        this.data = dv.rows;
      }
    },
    computed: {
      scale() {
        return [{
          dataKey: 'y',
          alias: this.yaxisText
        }]
      }
    },
    mounted() {
      triggerWindowResizeEvent()
    }
  }
</script>